<script lang="ts" setup>
import { reactive, ref } from "vue"
import { ElMessage, ElMessageBox } from "element-plus"
import type { FormInstance, FormRules } from "element-plus"
import { type WallPaperList } from "@/api/wallpaper/types/wallPaper.ts"
import { Edit, Delete } from "@element-plus/icons-vue"

import { usePagination } from "@/hooks/usePagination"
import { useRouter } from "vue-router"
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const dialogVisible = ref<boolean>(false)
const editData = ref<WallPaperList>({})
const router = useRouter()
const searchObj = ref({})
const options = ref([])
const handleAdd = () => {
  router.push({
    path: "/wallpaper/list/add"
  })
}

const handleEdit = (index: number, row: WallPaperList) => {
  dialogVisible.value = true
  editData.value = row
}
const handleDelete = (index: number, row: WallPaperList) => {
  ElMessageBox.confirm(`删除后无法恢复，确认删除吗？`, "操作确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    // delBanner({ row.id }).then((res) => {
    //   ElMessage({
    //     type: "success",
    //     message: "操作成功"
    //   })
    //   getList()
    // })
  })
}
const handleSearch = () => {}
const resetSearch = () => {}

const tableData: WallPaperList[] = [
  {
    classname: "AI美图",
    copyright: false,
    createTime: 1716462067211,
    nickname: "野生小鲸鱼🐳",
    score: "4.546399999999999",
    smallPicurl: "https://cdn.qingnian8.com/public/xxmBizhi/20240523/1716461969690_4_small.webp",
    _id: "664f21f309664cbba0b55aee"
  },
  {
    classname: "可爱萌宠",
    copyright: false,
    createTime: 1716462067211,
    nickname: "野生小鲸鱼🐳",
    score: "4.546399999999999",
    smallPicurl: "https://cdn.qingnian8.com/public/xxmBizhi/20240508/1715147943131_0_small.webp",
    _id: "663b14df1c90b65e43123225"
  }
]
const getTableData = () => {
  // const res = await fetchBannerList({
  //   page: paginationData.currentPage,
  //   limit: paginationData.pageSize,
  // })
  // tableData.value = res.data.list
  // paginationData.total = res.data.total
}

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, {
  immediate: true
})
</script>

<template>
  <div class="app-container">
    <el-form class="head-wrap" inline :model="searchObj" ref="searchFormRef" label-width="auto">
      <el-form-item label="" label-width="0">
        <el-button type="primary" @click="handleAdd">新增海报</el-button>
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="searchObj.value" placeholder="请选择" style="width: 260px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item class="search-btn">
        <el-button @click="handleSearch" type="primary" class="query-btn"><i class="iconfont icon-search" /></el-button>
        <el-button @click="resetSearch" class="refresh-btn"><i class="iconfont icon-reload" /></el-button>
      </el-form-item>
    </el-form>

    <el-table border :data="tableData" style="width: 100%">
      <el-table-column label="缩略图" align="center" width="150">
        <template #default="scope"
          ><img :src="scope.row.smallPicurl" style="width: 100px; height: 60px" alt=""
        /></template>
      </el-table-column>
      <el-table-column label="分类" align="center" prop="classname" />
      <el-table-column label="上传者" align="center" prop="nickname" />
      <el-table-column label="评分" align="center" prop="score" />
      <el-table-column label="发布时间" align="center" prop="createTime" />
      <el-table-column label="版权" align="center" prop="copyright">
        <template #default="{ row }"
          ><div>{{ row.appid ? row.appid : "--" }}</div></template
        >
      </el-table-column>

      <el-table-column label="操作" width="200" align="center">
        <template #default="scope">
          <el-button size="small" :icon="Edit" @click="handleEdit(scope.$index, scope.row)"> 编辑 </el-button>
          <el-button size="small" :icon="Delete" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <el-pagination
        :layout="paginationData.layout"
        :page-sizes="paginationData.pageSizes"
        :total="paginationData.total"
        :page-size="paginationData.pageSize"
        :currentPage="paginationData.currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<style lang="scss" scoped></style>
